<script setup lang="ts">
import {ref} from "vue";
import {messagelist, read, Unread} from "@/http/Personal center";
import {useCounterStore} from "@/stores/SaveUser";

const active = ref(0);
const onClickLeft = () => history.back();
const ids=useCounterStore()
const idone=ids.userInfo.id
const list=ref({})
// 系统消息
messagelist(idone).then(res=>{
    // console.log(res)
    list.value=res.rows
})
// const flag=ref(false)
// 未读消息
Unread(idone).then(res=>{
    // console.log(res)
    // console.log(res.data)
    ids.red=res.data
})
// 更新已读信息状态
function change(item){
    // console.log(item)
    // console.log(item.id)
    read([item.id]).then(res=>{
        console.log(res)
    })
}
</script>

<template>
<div>
    <div class="beijing">
    <van-nav-bar
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
    />
        <van-tabs v-model:active="active" color="#CEAFF8">
            <van-tab title="网络咨询">
                <div class="Message">
                    <div class="Messageone" v-for="num in 5" :key="num">
                        <div class="prith">
                            <img src="https://img1.baidu.com/it/u=3314132085,944825934&fm=253&fmt=auto&app=138&f=JPEG?w=390&h=260" alt="">
                        </div>
                        <div class="Words">
                            <div class="top">
                                <div class="zhang">
                                    张老师
                                </div>
                                <div class="day">
                                    2023-3-16
                                </div>
                            </div>
                            <div class="button">
                                回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="系统消息">
                    <div class="Notice" >
                        <router-link to="/Messagedetails" class="one">
                        <div class="naem" v-for="(item) in list" :key="item.id" @click="change(item)">
                            <van-badge :dot="item.isRead!=1" class="red">
                                <div class="child" />
                            </van-badge>
                        <div class="theres">
                            <div class="one">
                                {{item.psyMessages[0].title}}
                            </div>
                            <div class="rigt">
                                {{item.createTime}}
                            </div>
                        </div>
                        <div class="Content">
                            {{ item.psyMessages[0].content }}
                        </div>
                        </div>
                        </router-link>
                    </div>
            </van-tab>

        </van-tabs>
    </div>
</div>
</template>

<style scoped lang="less">
.beijing{
    background-color: #f4f4f4;
    height: 600px;
    .Message{
        margin-top: 10px;
        padding: 10px;
        box-sizing: border-box;
        height: 100vh;
        background-color: white;
        .Messageone{
            margin-top: 10px;
            height: 80px;
            border-bottom: 1px solid gray;
            display:flex;
            justify-content: space-between;
            .prith{
                width: 16%;
                height: 60px;
                border-radius: 50%;
                border: 1px solid gray;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .Words{
                width: 76%;
                .top{
                    display: flex;
                    justify-content: space-between;
                    .zhang{
                        font-size: 14px;
                    }
                    .day{
                        font-size: 14px;
                        color: rgb(171, 169, 169);
                    }
                }
                .button{
                    margin-top: 25px;
                    white-space: nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
            }
        }
    }
    .Notice{
        margin-top: 10px;
        padding: 10px;
        box-sizing: border-box;
        height: 100vh;
        background-color: white;
        .one{
            color: black;
        }
        .naem{
            padding: 20px 10px;
            border-bottom: 1px solid gray;
            position: relative;
            .red{
                position: absolute;
                right: 0;
                top: 10px;
            }
            .theres{
                display: flex;
                justify-content: space-between;
                .one{
                    font-size: 14px;
                }
                .rigt{
                    font-size: 14px;
                    color: rgb(192, 189, 189);
                }
            }
            .Content{
                margin-top: 10px;
                font-size: 14px;
            }
        }

    }

}
</style>